@red: #f50;
@blue: #2db7f5;
@green: #87d068;
@yellow: #fa0;
@grey: #e9e9e9;

.color(@color) {
  color: @color;
}

.back(@back, @color: white) {
  background-color: @back;
  color: @color;
}

.red {
  .color(@red)
}

.red-back {
  .back(@red)
}

.blue {
  .color(@blue)
}

.blue-back {
  .back(@blue)
}

.green {
  .color(@green)
}

.green-back {
  .back(@green)
}

.yellow {
  .color(@yellow)
}

.yellow-back {
  .back(@yellow)
}

.grey {
  color: lightgray;
}

.grey-back {
  .back(lightgrey);
}

.light.grey {
  color: @grey;
}

.light.grey-back {
  .back(@grey);
}

.dark.grey {
  color: grey;
}

.dark.grey-back {
  .back(grey);
}

@active-color: #eaf8fe;
